<template>
  <div class="ShangJia1">
      <div class="ShangJia1Top">
          <h5>{{seller.name}}</h5>
          <div class="div">
              <span>
               <img v-for="(item) in Math.floor(seller.score)" :key="item+'d'" src="../assets/img/star36_on@2x.png" alt="">
              <img v-for="(val) in Math.ceil(5-Math.floor(seller.score))" :key="val+'c'" src="../assets/img/star36_half@2x.png" alt="">
          </span>
          <span style="margin-right:24px">(661)</span>
           <span>月售690单</span>
          </div>
      </div>
      <div class="ShangJia1Bottom">
          <div class="ShangJia1Bottom1">
               <h6>起送价</h6>
              <span>20</span><span>元</span>
             
          </div>
          <div class="ShangJia1Bottom1">
              <h6>商家配送</h6>
              <span>{{seller.deliveryPrice}}</span><span>元</span>
          </div>
          <div class="ShangJia1Bottom1">
              <h6>平均配送时间</h6>
              <span>{{seller.ratingCount}}</span><span>分钟</span>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
        seller:[]
    }
},
    created:async function(){
    let {data} = await this.$http.get("api/getseller")
    this.seller=data
    }
}
</script>

<style lang="stylus" scoped>
w=100%; s1=24px; s2=28px; s3=32px; c=rgb(255,255,255);dw = 50%; bgc=#f3f5f7;
bgc1=rgb(7,17,27);bgc2=rgb(147,153,159);bgc3=rgb(255,153,0);bgc4=rgb(77,85,93);
.ShangJia1{
    width :w;
    height :300px;
    padding: 36px
    display: flex;
    flex-direction: column
    position relative
    margin-bottom: 36px
    background-color: white;
    
}
.ShangJia1::after{
    content: "";
    border-bottom: 1px solid  rgb(7,17,27,0.1)
    width :200%;
    height :200%;
    transform-origin: 0 0;
    transform: scale(0.5,0.5)
}

.ShangJia1Top{
    flex: 1;
    line-height: s2;
    border-bottom: 1px solid  rgb(7,17,27,0.1)
    position relative
    h5{
        font-size: s2;
        color: bgc1;
        margin-bottom: 16px
    }
    img{
        display: inline-block
        width s2
        height s2
        margin-right: 16px

    }
    span{
        font-size: 20px
        color: bgc4;
    }
    .div{
        margin-bottom: 36px
    }
}
.ShangJia1::after{
    content: "";
    border-bottom: 1px solid  rgb(7,17,27,0.1)
    width :200%;
    height :200%;
    transform-origin: 0 0;
    transform: scale(0.5,0.5)
}

.ShangJia1Bottom{
     flex: 1;
      padding:36px
      display: flex;
      flex-wrap: nowrap
}
.ShangJia1Bottom1{
   flex: 1;
   text-align: center
   border-right: 0.5px solid rgb(7,17,27,0.1);
    span:nth-of-type(1){
        font-size: 48px;
        color: bgc1;
        line-height: 48px
        font-weight: 200
    }
    span:nth-of-type(2){
         font-size: 20px;
       
    }
    h6{
       font-size: 20px;
        color: bgc2;
        line-height: 20px
        margin-bottom: 8px
    }
}
</style>